<template>
  <div class="lookthesis">
    <el-page-header @back="goBack" content="论文详情" title="">
    </el-page-header>

    <el-card class="box-card  mt-10" v-if="!isedit">

      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>论文题材:</span></el-col>
        <el-col :span="6" class="content"><span>JAVA框架</span></el-col>

      </el-row>
      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>标题:</span></el-col>
        <el-col :span="6" class="content"><span>成果管理系统</span></el-col>
      </el-row>

      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>指导老师:</span></el-col>
        <el-col :span="6" class="content"><span>龙天才</span></el-col>
      </el-row>

      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>学生附件:</span></el-col>
        <el-col :span="6" class="content flex" style="position: relative">
          <div class="div_download">
            <a href="">
              <div class="mask textcenter">
                <span>下载</span>
              </div>
            </a>
          </div>
        </el-col>

      </el-row>
      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>学生备注:</span></el-col>
        <el-col :span="6" class="content"><span>{{input}}</span></el-col>

      </el-row>
      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>状态:</span></el-col>
        <el-col :span="6" class="content"><span>未审核</span></el-col>

      </el-row>
      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>提交时间:</span></el-col>
        <el-col :span="6" class="content"><span>2019-10-10 15:15:15</span></el-col>
      </el-row>


      <el-row :gutter="20" class="mt-10" v-if="isexamine">
        <el-col :span="3" class="textright titlecolor"><span>老师附件:</span></el-col>
        <el-col :span="6" class="content">
          <div class="div_download">

            <a href="">
              <div class="mask textcenter">
                <span>下载</span>
              </div>
            </a>
          </div>
        </el-col>

      </el-row>
      <el-row :gutter="20" class="mt-10" v-if="isexamine">
        <el-col :span="3" class="textright titlecolor"><span>评语:</span></el-col>
        <el-col :span="6" class="content"><span>你这个有问题哟，还需要改一下</span></el-col>

      </el-row>

      <el-row class="mt-10 textright mb-10">

        <el-button type="warning" @click="editinfo" v-if="isexamine">编辑</el-button>
        <el-button type="warning" @click="goBack">返回</el-button>
        <el-button type="danger">退回</el-button>
      </el-row>

    </el-card>
    <el-card class="box-card  mt-10" v-if="isedit">

      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>论文题材:</span></el-col>
        <el-col :span="6" class="content"><span>JAVA框架</span></el-col>

      </el-row>
      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>标题:</span></el-col>
        <el-col :span="6" class="content"><span>成果管理系统</span></el-col>

      </el-row>
      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>指导老师:</span></el-col>
        <el-col :span="6" class="content"><span>龙天才</span></el-col>

      </el-row>
      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>学生附件:</span></el-col>
        <el-col :span="16" class="content flex" style="position: relative">
          <el-row :gutter="20" class="mt-10">
          </el-row>
          <div class="div_download">

          <a href="">
            <div class="mask textcenter">
              <span>上传</span>
            </div>
          </a>
        </div> <div class="div_download">

          <a href="">
            <div class="mask textcenter">
              <span>上传</span>
            </div>
          </a>
        </div>
          <div class="div_download">

            <a href="">
              <div class="mask textcenter">
                <span>上传</span>
              </div>
            </a>
          </div>

        </el-col>

      </el-row>
      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor">
          <span>学生备注:</span></el-col>
        <el-col :span="6" class="content">
          <el-input v-model="input" placeholder="请输入内容" type="textarea"
                    autosize></el-input>
        </el-col>

      </el-row>


      <el-row class="mt-10 textright mb-10">

        <el-button type="warning" @click="saveinfo">保存</el-button>
        <el-button type="warning" @click="goBack">返回</el-button>

      </el-row>

    </el-card>
  </div>
</template>

<script>
  export default {
    name: "lookthesis",
    data() {
      return {
        isexamine: true,
        isedit: false,
        input: '这是学生备注'

      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      //  获取id 查询对应的论文
      getthesis() {
        this.$route.query.id
      },
      //  编辑
      editinfo() {
        this.isedit = true
      },
      saveinfo() {
        this.isedit = false
      }
    },
    created() {

    },
  }
</script>

<style>

  .mt-10 {
    margin-top: 20px;
  }

  .titlecolor {
    color: #888888;
  }

  .content {
    color: #444444;
  }

  .mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 20px;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
  }

  .div_download:hover .mask {
    opacity: 1
  }

  .div_download {
    height: 90px;
    width: 90px;
    background-color: #1e9fff;
    position: relative;
  }

  .mb-10 {
    margin-bottom: 30px;
  }
</style>
